style.css

/* just put the borders up here for fun.  */
main, section, header, footer {
    border-width: 3px;
    border-style: solid;
}


header, footer {
    border-color: magenta;
    
}

main {
    border-color: #999999;
    padding: 10px;
    margin: 10px 0px;
}

section {
    border-color: rgb(40, 200, 40);
}


/* start the real code here!!  */

/* let's not worry about display layouts at the start! */
body {
    display: grid;
    grid-template-rows: 100px 1fr 200px;
    flex-direction: column;   
}


main {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    gap: 5px;
}

main > * {
    padding: 5px;
}

header {
    display: flex;
    justify-content: center;
}

footer{

}


/* style */
img {
    max-width: 65%;
    padding:2px;
    border: 1px solid black;
    margin: 5px;
    float: left;
    display: inline;
   
}
h2 {

}

p {
    
}

p.start {
}

p.main {

}

blockquote {
    padding-left: 10px;
    margin-left: 5px;
    border-left: solid rgba(128,128,128,0.7) 3px;
}



/* Transition :-) */
#badnews {transition: all 5s, transform 5s 3s;
           margin: inherit;
           max-width: inherit;
           border: inherit;
           font-size: inherit;
          }



#badnews:hover {
    margin: auto;
    max-width:50%;
    border: black 10px solid;
    background-color: red;
    font-size: 3em;
    padding: 75px;
    border-radius: 30%;
    transform: rotate(360deg);
    transition: width 6s, margin 6s, all 6s 1s;
}

.button {
    transition: all 6s;
}

.hidden {
    opacity: 0%;
    font-size: 0.6em;
    color: inherit;

}
.bugout {
    transition: all 8s;
    border-radius: 10px;
    border: blue 2px solid;
    font-size: 1.5em !important;
    color: red;
    max-width: 50%;
    margin:auto;
    opacity: 100%;
}

.do-transition {
    transition: all 6s;
    margin: auto !important;
    border: black 10px solid !important;
    background-color: #8e0934 !important;
    font-size: 5em !important;
    transform: skewX(-45deg) translate(40vw, -50vh) rotate(-45deg);
    transform-origin: left 90%;
}