h1 {
    color: rgb(230, 151, 6);
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}

.content a {
    color: white;
    text-decoration: none;
    border: rgb(230, 151, 6) 1px solid;
    border-radius: 30px;
    transition: 0.2s;
    width: 17dvw;
    height: 15dvh;
    padding: 12px;
    display: flex;
    align-items: center; 
    text-align: left;
}

.content a:hover {
    transition: 0.2s;
    background-color: rgba(230, 152, 6, 0.39);
    color: white;
}

.content a div {
    display: flex;
    flex-direction: column;
}

h3 {
    margin: 0;
}

p {
    color: #616161;
    margin: 0;
}

.icon {
    position: relative;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 15px;
}

.github_icon { background-image: url(/icons/main-site/github.svg); }
.steam_icon  { background-image: url(/icons/main-site/steam.svg); }
.mail_icon   { background-image: url(/icons/main-site/mail.svg); }

@media (max-width: 800px) {
    .content a {
        width: 90dvw;
        height: 30dvh;
    }

    .main {
        overflow-y: auto;
    }
}