@media (min-width: 200px) {
    * {
        padding: 0;
        margin: 0;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
           -moz-user-select: none; /* Old versions of Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                      supported by Chrome, Edge, Opera and Firefox */
    }
    
    :root {
        --purple: rgb(103, 25, 131);
        --dark-purple: rgb(70, 0, 92);
    
        --main-color: var(--dark-purple);
      }
    
    img {
        -moz-window-dragging: unset;
    }
    
    a:link {
        text-decoration: none;
        color: inherit;
    }
      
    a:visited {
        text-decoration: none;
        color: inherit;
    }
      
    a:hover {
      text-decoration: none;
      color: inherit;
    }
      
    a:active {
      text-decoration: none;
      color: inherit;
    }
    
    body {
        background-color: rgb(127, 42, 140);
        background-image: url("./bg.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(170, 19, 197, 0.317);
    }
    
    .center-block > #button-box > p > a > i {
        -moz-transition: all .2s ease-in;
        -o-transition: all .2s ease-in;
        -webkit-transition: all .2s ease-in;
        transition: all .2s ease-in;
    }
    
    .center-block > #button-box > #btn:hover {
        cursor: pointer;
    }
    
    .kofi > a > .fa-mug-hot {
        position: relative;
        top: -3px;
        font-size: 28px;
    }
    
    .fa-youtube:hover {
        color: #ff000088;
    }
    
    .fa-twitter:hover {
        color: #1DA1F288;
    }
    
    .fa-mug-hot:hover {
        color: #00000088;
    }
    
    .fa-spotify:hover {
        color: #1DB95488;
    }

    .fa-instagram:hover {
        color: #405de688;
    }
    
    @media (min-width: 700px) {
        .center-block {
            position: absolute;
            background-color: rgba(127, 42, 140, 0.17);
            backdrop-filter: blur(3px);
            width: 600px;
            height: 350px;
            top: 50%;
            left: 50%;
            border-radius: 75px;
            transform: translate(-50%, -50%);
            overflow: hidden;
            box-shadow: 0px 0px 60px rgba(29, 29, 29, 0.822);
        }
        
        .center-block > #pfp {
            position: fixed;
            width: 200px;
            border-radius: 50%;
            top: 50%;
            left: 25%;
            height: auto;
            transform: translate(-50%, -50%);
            box-shadow: 0px 0px 10px rgba(29, 29, 29, 0.822);
        }
        
        .center-block > p {
            position: fixed;
            font-family: 'Poppins';
            top: 0;
            left: 48%;
        }
        
        .center-block > #name {
            position: fixed;
            top: 25%;
            font-size: 30px;
            color: var(--main-color);
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
        }
        
        .center-block > #email {
            position: fixed;
            top: 45%;
            font-size: 29.5px;
            color: var(--main-color);
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
        }
        
        span {
            font-size: 50px;
            font-weight: 700;
        }
        
        .center-block > #button-box {
            position: fixed;
            margin-right: 10px;
            top: 60%;
            width: 255px;
            height: 30px;
            left: 48%;
        }
        
        .center-block > #button-box > #btn {
            position: relative;
            font-size: 30px;
            margin-right: 15px;
            top: 1px;
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
            color: var(--main-color);
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            text-rendering: auto;
        }
    }
    
    @media (max-width: 700px) and (min-width: 351px) {
        .center-block {
            position: absolute;
            background-color: rgba(127, 42, 140, 0.17);
            backdrop-filter: blur(3px);
            width: 350px;
            height: 450px;
            top: 50%;
            left: 50%;
            border-radius: 75px;
            transform: translate(-50%, -50%);
            overflow: hidden;
            box-shadow: 0px 0px 60px rgba(29, 29, 29, 0.822);
            text-align: center;
        }
        
        .center-block > #pfp {
            position: fixed;
            width: 200px;
            border-radius: 50%;
            top: 30%;
            left: 50%;
            height: auto;
            transform: translate(-50%, -50%);
            box-shadow: 0px 0px 10px rgba(29, 29, 29, 0.822);
        }
        
        .center-block > p {
            position: fixed;
            font-family: 'Poppins';
            top: 0;
            left: 50%;
            transform: translate(-50%, 0%);
            white-space: nowrap
        }
        
        .center-block > #name {
            position: fixed;
            top: 52%;
            font-size: 30px;
            color: var(--main-color);
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
        }
        
        .center-block > #email {
            position: fixed;
            top: 67%;
            font-size: 29.5px;
            color: var(--main-color);
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
        }
        
        span {
            font-size: 50px;
            font-weight: 700;
        }
        
        .center-block > #button-box {
            position: fixed;
            margin-right: 10px;
            top: 77%;
            width: 255px;
            height: 30px;
            left: 52%;
            transform: translate(-50%, 0%);
        }
        
        .center-block > #button-box > #btn {
            position: relative;
            font-size: 30px;
            margin-right: 15px;
            top: 1px;
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
            color: var(--main-color);
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            text-rendering: auto;
        }
    }

    @media (max-width: 380px) and (min-width: 200px) {
        .center-block {
            position: absolute;
            background-color: rgba(127, 42, 140, 0.17);
            backdrop-filter: blur(3px);
            width: 320px;
            height: 430px;
            top: 50%;
            left: 50%;
            border-radius: 75px;
            transform: translate(-50%, -50%);
            overflow: hidden;
            box-shadow: 0px 0px 60px rgba(29, 29, 29, 0.822);
            text-align: center;
        }
        
        .center-block > #pfp {
            position: fixed;
            width: 200px;
            border-radius: 50%;
            top: 30%;
            left: 50%;
            height: auto;
            transform: translate(-50%, -50%);
            box-shadow: 0px 0px 10px rgba(29, 29, 29, 0.822);
        }
        
        .center-block > p {
            position: fixed;
            font-family: 'Poppins';
            top: 0;
            left: 50%;
            transform: translate(-50%, 0%);
            white-space: nowrap
        }
        
        .center-block > #name {
            position: fixed;
            top: 52%;
            font-size: 30px;
            color: var(--main-color);
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
        }
        
        .center-block > #email {
            position: fixed;
            top: 67%;
            font-size: 29.5px;
            color: var(--main-color);
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
        }
        
        span {
            font-size: 50px;
            font-weight: 700;
        }
        
        .center-block > #button-box {
            position: fixed;
            margin-right: 10px;
            top: 77%;
            width: 255px;
            height: 30px;
            left: 52%;
            transform: translate(-50%, 0%);
        }
        
        .center-block > #button-box > #btn {
            position: relative;
            font-size: 30px;
            margin-right: 15px;
            top: 1px;
            text-shadow: 0px 5px 4px rgba(133, 8, 179, 0.822);
            color: var(--main-color);
            display: inline-block;
            -webkit-font-smoothing: antialiased;
            text-rendering: auto;
        }
    }
}

@media (max-width: 199px) {
    .center-block > #name:after {
        content: '\A also your screen resolution is dogshit, enjoy this website :)';
        display: block;
    }
}