html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
}

body, .main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #442200;
    overflow: hidden;
}

@keyframes pulse {
    from {background-color: orangered;}
    to {background-color: orange;}
}

@keyframes pulseoutline {
    from {outline: 5px orangered dotted;}
    to {outline: 5px orange dotted;}
}

.wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1;
    justify-content: center;
    align-items: flex-start;
}

.main {
    width: 960px;
    height: 90%;
    background: url("/img/bg/snow.jpg") no-repeat fixed;
    background-size: 100% 100%;
    border: 10px black dashed;
    outline: 5px orangered dotted;
}

.about {
    background: url("/img/bg/apples_sm.jpg") repeat;
}

.projects {
    background: url("/img/bg/hearts.jpg") no-repeat fixed;
    background-size: 100% 100%;
}

.creations {
    background: url("/img/bg/sky.jpg") no-repeat fixed;
    background-size: 100% 100%;
}

h1, h2, h3 {
    background-color: cornflowerblue;
    padding-left: 30px;
    padding-right: 30px;
}

span {
    font-family: "Times New Roman";
}

.welcome {
    width: 100%;
    background-color: darkolivegreen;
    font-size: 30px;
    color: goldenrod;
    text-align: center;
    font-weight: bold;
}

.warn {
    background-color: orangered;
    font-size: 15px;
    color: white;
    text-align: center;
}

.info, .info * {
    background-color: white;
    color: black;
}

body:has(.warn:hover) .warn {
    animation: pulse 0.5s infinite alternate;
}

body:has(.warn:hover) .main {
    animation: pulseoutline 0.5s infinite alternate;
    /*animation: pulse 0.5s infinite alternate;*/
}