html, body { margin: 0; padding: 0; min-width: 400px; width: 100%; height: 100%; font-family: sans-serif; font-size: 20px; background: #ffffff; scroll-behavior: smooth; }

h1           { font-size: 45px; width: 60%; margin: 15px 20%; font-weight: normal; }
h2           { font-size: 30px; width: 60%; margin: 15px 20%; font-weight: normal; color: #ffffff; }
p            { width: 80%; margin: 15px 10%; }
h1, h2, p    { text-align: center; }
a            { text-decoration: none; }
ul, li       { text-align: left; }
li           { padding: 5px 0; }
a:active, :focus, input:focus { outline: none; }

.deselect   { user-select: none; }
.limit      { width: 100%; border-bottom: 1px solid #dedede; }

.grey-tint     { background: #f5f5f5; }
.green-tint    { background: #e2e9e2; }
.pink-tint     { background: #f1e7f8; }
.blue-tint     { background: #ebf4ff; }
.blue-tint2    { background: #ccd9ff; }
.blue-tint3    { background: rgb(255,0,0); background: linear-gradient(319deg, rgba(255,0,0,1) 0%, rgba(0,52,255,1) 100%); }

/* --------------- MENU --------------- */
#menu     { min-width: 260px; position: fixed; background: rgba(255, 255, 255, 0.98); top: 0; left: 0; right: 0; height: 100px; line-height: 100px; text-align: center; z-index: 5; border-bottom: 1px solid #dedede; }

#logo       { height: 100px; display: flex; float: left; align-items: center; justify-content: flex-start; cursor: pointer; }
#logo svg   { fill: #000000; height: 100%; width: 220px; margin: 0 0 0 10px; }

#links          { display: flex; align-items: center; justify-content: flex-end; height: 100px; }
#links a.link   { cursor: pointer; font-size: 18px; font-weight: 500; padding: 0 20px; color: #000000; display: block; }


/* --------------- BUTTONS --------------- */
.button     { background: #000000; font-weight: 400; height: 52px; line-height: 52px; font-size: 18px; color: #ffffff; padding: 0 22px; margin: 15px 10px; border-radius: 26px; transition: transform 0.3s ease; }
.buy        { background: #000000; font-weight: 400; height: 70px; line-height: 70px; color: #ffffff; padding: 0 28px; margin: 5px 10px; border-radius: 35px; font-size: 22px; transition: transform 0.3s ease; }
.button:hover,
.buy:hover { transform: scale(1.05); }

.button-green1     { background: #0c3026; }
.button-green2     { background: #3c5444; }
.button-blue1      { background: #00a1f1; }
.button-blue2      { background: #0081c2; }
.button-blue3      { background: #0012b4; } 
.button-blue4      { background: #1955ff; } 


/* --------------- SECTIONS --------------- */
section        { width: 1000px; padding: 0; margin: 0 auto; }

.flex          { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 auto; }

.space-large   { padding: 100px 0; }
.space-small   { padding: 40px 0; }

#first         { padding: 180px 0 80px 0;}

img#ticket           { width: 100%; max-width: 1000px; border-radius: 1em; margin-bottom: 30px; z-index: 3; border: 3px solid #ffffff;
                       transform: rotate3d(0.5, -0.866, 0, 15deg) rotate(1deg) scale(0.95); box-shadow: 1em 2em 2em -2em rgba(0, 0, 0, 0.5);  transition: transform 0.4s ease, box-shadow 0.4s ease; }
img#ticket:hover     { transform: rotate3d(0, 0, 0, 0deg) rotate(0deg) scale(1); box-shadow: 1em 3em 4em -2em rgba(0, 0, 0, 0.3); }



/* --------------- FOOTER --------------- */
#footer p { font-size: 16px; line-height: 26px; color: #787878; }
#footer a { color: #000000; font-weight: bold; }


/* --------------- RESPONSIVE --------------- */
@media screen and (max-width: 1100px) {
  section { width: calc(100% - 100px); }
}

@media screen and (max-width: 580px) {
  section { width: calc(100% - 60px); }
  #links { display: none; }
  #logo { justify-content: center; float: none; }
  .button { height: 46px; line-height: 46px; font-size: 16px; }
  .buy { height: 56px; line-height: 56px; font-size: 18px; }
  h1 { font-size: 36px; width: 70%; margin: 15px 15%; }
  h2 { font-size: 26px; width: 70%; margin: 15px 15%; }
  body { font-size: 18px; }
}