@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Quicksand-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Internet Friends";
  font-style: bold;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Internet\ Friends.ttf");
}

* {
  box-sizing: border-box;
}

body {
    padding-left: 3em;
    padding-right: 3em;
    font-family: "Quicksand";
    background-color: white;

    a {
        color: black;
    }
    a:hover{
        background-color: rgba(62, 150, 179, 0.592);
        cursor: pointer;
    }
    footer {
        padding: 20px;
        text-align: center;
    }

    #cassette-wrapper {
        margin: auto;
        width: 800px;
    }

    audio {
        display: block;
        position: initial;
        padding: 0.5em;
        margin-top: 2em;
        margin-bottom: 1em;
        width: 100%;
    }

    header {
        font-family: "Internet Friends";
        font-size: x-large;
        position: relative;
        top: 150px;
        left: 140px;
        
        span {
            background-color: rgba(62, 150, 179, 0.592);
        }

        h1 {
            padding: 0px;
            margin: 0px;
        }

        p {
            top: -10px;
            padding:0px;
            margin: 0px;
        }
    }

    section {
        display: block;
    }

    @media only screen and (max-device-width: 480px) {

        #cassette-wrapper {
            width: 480px;
       }
        #cassette {
            width: 70%;
            height: 70%;
        }

        header {
            top: 70px;
            left: 40px;
            font-size: small;
        }

        description {
            width: 70%;
            display: block;
        }

        audio {
            width: 70%;
        }
    }
}