@import './contact.css';

body {
    background-color: rgb(221, 221, 231);
}

a {
    word-wrap: break-word;
}

#icon {
    border-radius: 100%;
    height: 100%;
}

.header {
    background-color: darkslategrey;
}

.primaryText {
    color: rgb(96, 38, 151);
}

.gameLink {
    background-color: darkslategrey;
    margin-right: auto;
    margin-left: auto;
    max-width: 400px;
    min-width: 300px;
}

.tutorial {
    background-color: rgb(47, 48, 79);
    margin-right: auto;
    margin-left: auto;
    max-width: 400px;
    min-width: 300px;
}

.tool {
    background-color: rgb(103, 54, 124);
    margin-right: auto;
    margin-left: auto;
    max-width: 400px;
    min-width: 300px;
}

.websiteLink {
    background-color: rgb(143, 116, 61);
    margin-right: auto;
    margin-left: auto;
    max-width: 400px;
    min-width: 300px;
}

main {
    background-color: rgba(250, 235, 215, 0.753);
}

.anchors {
    background-color: rgba(250, 235, 215, 0.753);
}

body::after {
    content: "";
    background: url("/images/showoffs/background.png");
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
}

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
}

.iframe-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}


.itch-container{
    position: relative;
    width: 100%;
    padding-bottom: 18%; 
    height: 0;
}

.itch-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.game-container{
    position: relative;
    width: 100%;
    padding-bottom: 70%; 
    height: 0;
    overflow: hidden;   
}

.game-container iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

code script{
    background-color: black;
    color: white;
    display: block;
}

pre {
    background-color: black;
    color: white;
    display: block;
    overflow-x: auto;
}

.lead img{
    position: relative;
    max-width: 100%;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 20%;
    padding-right: 20%;
}

button,
input[type=submit] {
    background-color: rgb(1, 1, 10);
    color: antiquewhite;
    border-radius: 7px;
}

button:disabled,
input[type=submit]:disabled {
    background-color: rgb(79, 79, 91);
}

.info {
    width: 100%;
}

.marquee {
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0%   { transform: translate(0, 25%); }
    100% { transform: translate(-100%, 25%); }
}

.fancy {
    color: antiquewhite;
}