@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
    --blue-color: #075CB7;
    --purple-color:#7907B7;
    --black-color:#0D0D0D;
    --light-purple-color:#9439C5;
    --green-color:#07B71B;
    --red-color:#B70707;
    --responsive-spacing:100px;
}

@media(max-width:768px){
    :root{
        --responsive-spacing:10px;
    }
}

*{
    padding:0;
    margin:0;
    font-family:"Inter", sans-serif;
    color:white;
    font-weight:500;
}

/*all*/

a{
    text-decoration: none;
}

a,button, .file-btn, span.primary-btn{
    transform:scale(1);
    transition:0.2s all;
    cursor:pointer;
}

a:hover, button:hover, .file-btn:hover,span.primary-btn:hover{
    transform:scale(1.05);
}

body{
    background:linear-gradient(var(--blue-color),var(--purple-color));
    min-height:100vh;
    background-repeat: no-repeat;
    padding-inline:var(--responsive-spacing);
    display:flex;
    align-items: center;
    flex-direction: column;
    margin-inline: auto;
    justify-content: center;
}

.secondary-btn{
    background-color:var(--purple-color);
    color:white !important;
    padding:10px;
    border-radius:10px;
    display:flex;
    align-items: center;
    gap:5px;
    font-size:18px;
    font-weight:500;
}

.secondary-btn img{
    height:15px;
}

/*header*/

#header{
    width:100%;
    display:flex;
    justify-content: space-between;
    background-color:rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border:solid 1px rgba(255,255,255,0.2);
    padding:20px;
    border-radius:20px;
    position:fixed;
    top:20px;
    right:var(--responsive-spacing);
    left:var(--responsive-spacing);
    width:calc(100% - var(--responsive-spacing) * 2 - 20 * 2);
}


/*main*/

h1{
    font-size:64px;
    font-weight:900;
    padding-bottom:20px;
    text-align: center;
}

#main h2{
    font-size:48px;
    font-weight:bold;
    text-align: center;
}

.primary-btn{
    background-color:rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border:solid 1px rgba(255,255,255,0.2);
    padding:20px;
    border-radius:20px;
    display:flex;
    align-items: center;
    width:fit-content;
    font-size:18px;
    gap:5px;
}

input[type="file"]{
    display:none !important;
}

button.secondary-btn{
    border:solid 1px var(--light-purple-color);
    padding:20px;
    border-radius:20px;
}

form{
    display:flex;
    justify-content: center;
    gap:10px;
    padding-block:20px;
}

#main p{
    text-align: center;
    font-size:16px;
    font-weight:300;
}

/*footer*/

#footer{
    display:flex;
    gap:20px;
    align-items: center;
    justify-content: center;
    background-color:rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border:solid 1px rgba(255,255,255,0.2);
    padding:10px;
    border-radius:10px;
    margin-bottom:20px;
    position:absolute;
    bottom:10px;
    min-width:300px;
}

#footer img{
    width:100px;
}

#success-container{
    display:flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}

/*success*/


span.primary-btn{
    padding:10px;
    border-radius:10px;
}

p.success{
    color:var(--green-color);
    font-weight:bold !important;
    font-size:20px !important;
}

/*error*/
#error{
    position:fixed;
    background-color:white;
    border-left:solid 5px var(--red-color);
    color:black;
    padding:10px;
    border-radius:10px;
    top:120px;
    right:var(--responsive-spacing);
    z-index:99999;
    animation-name:error-animation;
    animation-duration:0.5s;
}

@keyframes error-animation{
    0%{
        transform:scale(0.9);
        opacity: 0;
    }

    100%{
        transform:scale(1);
        opacity: 1;
    }
}

#error h2{
    color:var(--red-color);
    font-weight:bold;
    font-size:18px;
}


/*responsive*/

@media(max-width:425px){

    body{
        min-height:calc(100vh - 150px);
        padding-top:150px;
    }

    h1{
        font-size:48px;
        margin-bottom:20px;
    }

    #main h2{
        font-size:32px;
    }

    #footer{
        position:static;
        margin-top:100px;
    }
}



/*******CONTENT.PHP*******/

body#content{
    justify-content:space-between;
    padding-block:40px;
    min-height: calc(100vh - 80px);
    gap:40px;
}

#top-content{
    display:flex;
    height:fit-content;
    align-items: end;
    gap:40px;
}

#top-content img{
    width:200px;
}

#top-content h1{
    font-size:48px;
    padding:0;
}

body#content a.primary-btn{
    padding:15px;
    border-radius:15px;
}

img.content{
    max-height:400px;
    max-width:100%;
}


body#content #footer{
    position:static;
}

@media(max-width:425px){
    #top-content{
        flex-direction:column;
        align-items: center;
        gap:20px;
    }

    body#content h1{
        font-size:32px;
    }
}