@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
    font-family: 'Montserrat', sans-serif;

}
.material-symbols-outlined {
    transform: translateY(5px);
}
@media (max-width: 600px) {
    body {
        font-size: 0.8rem;
    }
    header div {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    .icon {
        width: 30%;
    }
}
body {
    background:linear-gradient(125deg,#d11910, #8a130b);
    color:white;
    animation: bg 5s linear infinite;
    background-size: 400% 400%;
    width:100%;
    height:100%;
}
section {
    background: rgba(255, 255, 255, 0.1);
    padding:10px;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 10px;
    transition-duration:500ms ;
}
section:hover,main:hover {
    background: rgba(255, 255, 255, 0.2);
    scale:0.95;
    translate: 5px -5px
}

@keyframes bg {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}
.code-snippet {
    background: rgba(0,0,0,0.2);
    font-family: 'Cascadia Code', monospace;
    font-weight: 300;
    padding: 5px;
    border-radius: 10px;
    border:1px solid;
    border-image:linear-gradient(to right, #ff7e5f, #feb47b);
}
button {
    border:none;
    border-radius: 5px;
    padding:7px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    color:white;
    cursor: pointer;
    transition-duration: 0.5s;
}
button:hover {
    background: rgba(255, 255, 255, 0.2);
    
    translate:5px 0;
}
button:active {
    background: rgba(255, 255, 255, 0.3);
    translate:0 5px;
}
header div{
    display:flex;
}
header {
    background: rgba(0,0,0,0.2);
    padding: 10px;
    
    margin-bottom: 20px;
    border-radius: 10px;

}


.icon {
    width:15%;
    border-radius: 50%;
    transition-duration: 1s;

}
.icon:hover {
    transform:translate(0,10px) rotateY(45deg);
}
.icon:active {
    transform:rotate3d(0, 1, 0, 180deg);
}
main {
    background: rgba(255, 255, 255, 0.1);
    padding:10px;
    border-radius: 10px;
    transition-duration: 500ms;
}