[comment]
[font=Playfair Display]title[/font]
[font=Roboto]body[/font]
[/comment][border=none; padding: 0px;

--accent: #dbb22a;
--bg: #111;
--color: #fff;
--credit: #555;
--unselected: #a38627;

--title: Playfair Display;
--body: Roboto;

--img1: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png);
--img2: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png);
--img3: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png);
--img4: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png);
--img5: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png);
--img6: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png);
--img7: url(https://www.unfe.org/wp-content/uploads/2019/04/SM-placeholder.png);

max-width: 700px; margin: auto; background: var(--bg); border: var(--border); box-sizing: border-box; font-size: 12px; font-family: Roboto; color: var(--color);][border=none; padding: 0px; height: 40px; width: 40%; border-radius: 0px 0px 25px 0px; position: relative; margin-bottom: -40px; background: var(--accent);][/border][comment]

------container-------[/comment][border=none; padding: 0px; position: relative; z-index: 1; box-sizing: border-box;][border=none; padding: 0px; padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]

------left filler------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; height: 450px; flex-grow: 1;][/border][comment]

------right filler------[/comment][border=none; padding: 0px; margin: 10px; width: 320px; height: 450px; flex-grow: 1;][/border][comment]----end of filler container-----[/comment][/border][comment]

------tab container-------[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;][comment]

----credit (don't remove!)------[/comment][border=none; padding: 0px; height: 10px; margin-top: 5px; margin-bottom: 15px; flex-grow: 1; color: var(--credit); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box; padding-left: 20px;]coded by natasha.[/border][comment]

----tabs begin------[/comment][border=none; padding: 0px; width: 350px; height: 30px; overflow: hidden;][border=none; padding: 0px; letter-spacing: 13px; margin: 3px -80px 0 5px;][tabs][comment]




------tab one-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none;][border=none; padding: 0px; padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]

------first image------[/comment][border=none; padding: 0px; margin: 10px; width: 220px; height: 450px; background: var(--img1); background-size: cover; background-position: 50% 50%; flex-grow: 1;][/border][comment]

------right side------[/comment][border=none; padding: 0px; margin: 10px; width: 420px; height: 450px; flex-grow: 1; pointer-events: auto;][comment]

----title------[/comment][border=none; padding: 0px; height: 25px; text-align: right; font-family: var(--title); text-transform: uppercase; font-style: italic; color: var(--accent); font-size: 30px; box-sizing: border-box; padding-right: 5px; line-height: 20px;]— thorns of gold[/border][comment]

-----content comes here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 405px; overflow: hidden; margin-top: 20px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify; line-height: 22px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia feugiat faucibus. Curabitur laoreet molestie lectus, quis ultrices lacus elementum vitae. Cras feugiat imperdiet velit quis laoreet. Fusce non lorem quis turpis congue varius nec et ligula.

Phasellus non vulputate dui. Nullam nisl est, vehicula rhoncus ornare vel, laoreet ac ipsum. Vivamus eget dolor mi. Maecenas sed metus nec nibh placerat bibendum. Sed dui est, maximus in lorem a, viverra venenatis nisl.

Nulla enim augue, consequat nec tortor et, tincidunt dignissim eros. Etiam ultricies egestas elit et maximus. Praesent lectus sapien, finibus ut imperdiet a, accumsan a dui. Nam tempor, arcu sit amet egestas fermentum, lorem elit semper sapien, auctor efficitur arcu justo vel tortor. Aliquam ut pellentesque lectus, non tempus augue.

Suspendisse ac finibus dui. Duis cursus mauris ex, placerat sodales enim luctus sed. Vestibulum eleifend nisl in rhoncus cursus. Maecenas aliquet sed risus at malesuada. Etiam ultricies facilisis enim sit amet commodo. Sed ac quam lobortis, consequat est non, vulputate risus. Maecenas vehicula velit metus. Maecenas ut urna non metus ultrices egestas ac non dolor.

Proin eu ipsum quis ligula elementum blandit. Donec finibus dolor viverra eleifend efficitur. Duis tempus ligula ut pulvinar rhoncus. Praesent lobortis id felis vel mattis. Donec et commodo erat. Duis facilisis maximus arcu eget interdum. Fusce ut tristique libero, sit amet vulputate sem.

Vestibulum pharetra nibh a metus facilisis, id sodales nisl congue. Fusce id sapien justo. Maecenas sed congue turpis, vel luctus lectus. Vivamus ultrices neque vitae elit rhoncus pulvinar at sit amet lacus. Curabitur accumsan justo sed neque pharetra volutpat. Vivamus placerat lorem at eros hendrerit sollicitudin. Curabitur vitae faucibus est.
[/border][/border][/border][/border][comment]

--------end of main content------[/comment][/border][comment]


-------tab buttons-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;][comment]
----credit filler------[/comment][border=none; padding: 0px; height: 10px; margin-top: 5px; margin-bottom: 15px; flex-grow: 1; color: transparent; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box; padding-left: 20px;]coded by natasha.[/border][comment]
------buttons begin-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; height: 30px; border-radius: 25px 0px 0px 0px; background: var(--accent); text-transform: uppercase; color: var(--unselected); font-weight: bold; width: 350px; letter-spacing: 1px;][comment]
-------button one-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; color: var(--color);]about[/border][comment]
-------button two-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]lore[/border][comment]
-------button three-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]spots[/border][comment]
-------button four-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]rules[/border][comment]
-------end of tab buttons----[/comment][/border][/border][comment]


------end of tab one-----[/comment][/border][/tab][comment]




------tab two-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none;][border=none; padding: 0px; padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]

------left side------[/comment][border=none; padding: 0px; margin: 10px; width: 440px; height: 450px; flex-grow: 1; pointer-events: none;][comment]

----title------[/comment][border=none; padding: 0px; height: 25px; text-align: right; font-family: var(--title); text-transform: uppercase; font-style: italic; color: var(--accent); font-size: 30px; box-sizing: border-box; padding-right: 5px; line-height: 20px; margin-top: 35px;]a bit more in depth[/border][comment]

-----content comes here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 250px; overflow: hidden; margin-top: 20px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify; line-height: 22px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia feugiat faucibus. Curabitur laoreet molestie lectus, quis ultrices lacus elementum vitae. Cras feugiat imperdiet velit quis laoreet. Fusce non lorem quis turpis congue varius nec et ligula.

Phasellus non vulputate dui. Nullam nisl est, vehicula rhoncus ornare vel, laoreet ac ipsum. Vivamus eget dolor mi. Maecenas sed metus nec nibh placerat bibendum. Sed dui est, maximus in lorem a, viverra venenatis nisl.

Nulla enim augue, consequat nec tortor et, tincidunt dignissim eros. Etiam ultricies egestas elit et maximus. Praesent lectus sapien, finibus ut imperdiet a, accumsan a dui. Nam tempor, arcu sit amet egestas fermentum, lorem elit semper sapien, auctor efficitur arcu justo vel tortor. Aliquam ut pellentesque lectus, non tempus augue.

Suspendisse ac finibus dui. Duis cursus mauris ex, placerat sodales enim luctus sed. Vestibulum eleifend nisl in rhoncus cursus. Maecenas aliquet sed risus at malesuada. Etiam ultricies facilisis enim sit amet commodo. Sed ac quam lobortis, consequat est non, vulputate risus. Maecenas vehicula velit metus. Maecenas ut urna non metus ultrices egestas ac non dolor.

Proin eu ipsum quis ligula elementum blandit. Donec finibus dolor viverra eleifend efficitur. Duis tempus ligula ut pulvinar rhoncus. Praesent lobortis id felis vel mattis. Donec et commodo erat. Duis facilisis maximus arcu eget interdum. Fusce ut tristique libero, sit amet vulputate sem.

Vestibulum pharetra nibh a metus facilisis, id sodales nisl congue. Fusce id sapien justo. Maecenas sed congue turpis, vel luctus lectus. Vivamus ultrices neque vitae elit rhoncus pulvinar at sit amet lacus. Curabitur accumsan justo sed neque pharetra volutpat. Vivamus placerat lorem at eros hendrerit sollicitudin. Curabitur vitae faucibus est.
[/border][/border][/border][comment]

------second image-----[/comment][border=none; padding: 0px; height: 100px; background: var(--img2); background-size: cover; background-position: 50% 50%; margin-top: 20px;][/border][/border][comment]

------third image ------[/comment][border=none; padding: 0px; margin: 10px; width: 200px; height: 450px; background: var(--img3); background-size: cover; background-position: 50% 50%; flex-grow: 1;][/border][comment]

--------end of main content------[/comment][/border][comment]


-------tab buttons-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;][comment]
----credit filler------[/comment][border=none; padding: 0px; height: 10px; margin-top: 5px; margin-bottom: 15px; flex-grow: 1; color: transparent; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box; padding-left: 20px;]coded by natasha.[/border][comment]
------buttons begin-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; height: 30px; border-radius: 25px 0px 0px 0px; background: var(--accent); text-transform: uppercase; color: var(--unselected); font-weight: bold; width: 350px; letter-spacing: 1px;][comment]
-------button one-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]about[/border][comment]
-------button two-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; color: var(--color);]lore[/border][comment]
-------button three-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]spots[/border][comment]
-------button four-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]rules[/border][comment]
-------end of tab buttons----[/comment][/border][/border][comment]


------end of tab two-----[/comment][/border][/tab][comment]




------tab three-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none;][border=none; padding: 0px; padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]

------left side------[/comment][border=none; padding: 0px; margin: 10px; width: 200px; height: 450px; flex-grow: 1;][comment]

--------fourth image-----[/comment][border=none; padding: 0px; height: 215px; background: var(--img4); background-size: cover; background-position: 50% 50%;][/border][comment]

--------fifth image-----[/comment][border=none; padding: 0px; height: 215px; background: var(--img5); margin-top: 20px; background-size: cover; background-position: 50% 50%;][/border][/border][comment]

------right side------[/comment][border=none; padding: 0px; margin: 10px; width: 440px; height: 450px; flex-grow: 1;][comment]

----title------[/comment][border=none; padding: 0px; height: 25px; text-align: right; font-family: var(--title); text-transform: uppercase; font-style: italic; color: var(--accent); font-size: 30px; box-sizing: border-box; padding-right: 5px; line-height: 20px;]the star cast[/border][comment]

-----content comes here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 405px; overflow: hidden; margin-top: 20px;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify; line-height: 22px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia feugiat faucibus. Curabitur laoreet molestie lectus, quis ultrices lacus elementum vitae. Cras feugiat imperdiet velit quis laoreet. Fusce non lorem quis turpis congue varius nec et ligula.

Phasellus non vulputate dui. Nullam nisl est, vehicula rhoncus ornare vel, laoreet ac ipsum. Vivamus eget dolor mi. Maecenas sed metus nec nibh placerat bibendum. Sed dui est, maximus in lorem a, viverra venenatis nisl.

Nulla enim augue, consequat nec tortor et, tincidunt dignissim eros. Etiam ultricies egestas elit et maximus. Praesent lectus sapien, finibus ut imperdiet a, accumsan a dui. Nam tempor, arcu sit amet egestas fermentum, lorem elit semper sapien, auctor efficitur arcu justo vel tortor. Aliquam ut pellentesque lectus, non tempus augue.

Suspendisse ac finibus dui. Duis cursus mauris ex, placerat sodales enim luctus sed. Vestibulum eleifend nisl in rhoncus cursus. Maecenas aliquet sed risus at malesuada. Etiam ultricies facilisis enim sit amet commodo. Sed ac quam lobortis, consequat est non, vulputate risus. Maecenas vehicula velit metus. Maecenas ut urna non metus ultrices egestas ac non dolor.

Proin eu ipsum quis ligula elementum blandit. Donec finibus dolor viverra eleifend efficitur. Duis tempus ligula ut pulvinar rhoncus. Praesent lobortis id felis vel mattis. Donec et commodo erat. Duis facilisis maximus arcu eget interdum. Fusce ut tristique libero, sit amet vulputate sem.

Vestibulum pharetra nibh a metus facilisis, id sodales nisl congue. Fusce id sapien justo. Maecenas sed congue turpis, vel luctus lectus. Vivamus ultrices neque vitae elit rhoncus pulvinar at sit amet lacus. Curabitur accumsan justo sed neque pharetra volutpat. Vivamus placerat lorem at eros hendrerit sollicitudin. Curabitur vitae faucibus est.
[/border][/border][/border][/border][comment]

--------end of main content------[/comment][/border][comment]


-------tab buttons-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;][comment]
----credit filler------[/comment][border=none; padding: 0px; height: 10px; margin-top: 5px; margin-bottom: 15px; flex-grow: 1; color: transparent; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box; padding-left: 20px;]coded by natasha.[/border][comment]
------buttons begin-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; height: 30px; border-radius: 25px 0px 0px 0px; background: var(--accent); text-transform: uppercase; color: var(--unselected); font-weight: bold; width: 350px; letter-spacing: 1px;][comment]
-------button one-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]about[/border][comment]
-------button two-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]lore[/border][comment]
-------button three-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; color: var(--color);]spots[/border][comment]
-------button four-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]rules[/border][comment]
-------end of tab buttons----[/comment][/border][/border][comment]


------end of tab three-----[/comment][/border][/tab][comment]




------tab four-----[/comment][tab=.][border=none; padding: 0px; position: absolute; bottom: 0; left:0; right: 0; top: 0; letter-spacing: 0; pointer-events: none;][border=none; padding: 0px; padding: 10px; display: flex; flex-direction: row; flex-wrap: wrap;][comment]

------left side------[/comment][border=none; padding: 0px; margin: 10px; width: 260px; height: 450px; flex-grow: 1;][comment]

----title------[/comment][border=none; padding: 0px; height: 25px; text-align: right; font-family: var(--title); text-transform: uppercase; font-style: italic; color: var(--accent); font-size: 30px; box-sizing: border-box; padding-right: 5px; line-height: 20px; margin-top: 35px;]the rules[/border][comment]

------sixth image------[/comment][border=none; padding: 0px; height: 370px; background: var(--img6); background-size: cover; background-position: 50% 50%; margin-top: 20px;][/border][/border][comment]

------right side------[/comment][border=none; padding: 0px; margin: 10px; width: 380px; height: 450px; flex-grow: 1; pointer-events: auto;][comment]

-----content comes here------[/comment][border=none; padding: 0px; box-sizing: border-box; width: 100%; height: 340px; overflow: hidden;][border=none; padding: 0px; height: 100%; width: 200%; overflow-y: auto;][border=none; padding: 0px; height: auto; width: 50%; box-sizing: border-box; text-align: justify; line-height: 22px;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia feugiat faucibus. Curabitur laoreet molestie lectus, quis ultrices lacus elementum vitae. Cras feugiat imperdiet velit quis laoreet. Fusce non lorem quis turpis congue varius nec et ligula.

Phasellus non vulputate dui. Nullam nisl est, vehicula rhoncus ornare vel, laoreet ac ipsum. Vivamus eget dolor mi. Maecenas sed metus nec nibh placerat bibendum. Sed dui est, maximus in lorem a, viverra venenatis nisl.

Nulla enim augue, consequat nec tortor et, tincidunt dignissim eros. Etiam ultricies egestas elit et maximus. Praesent lectus sapien, finibus ut imperdiet a, accumsan a dui. Nam tempor, arcu sit amet egestas fermentum, lorem elit semper sapien, auctor efficitur arcu justo vel tortor. Aliquam ut pellentesque lectus, non tempus augue. Suspendisse ac finibus dui. Duis cursus mauris ex, placerat sodales enim luctus sed. Vestibulum eleifend nisl in rhoncus cursus. Maecenas aliquet sed risus at malesuada.

Etiam ultricies facilisis enim sit amet commodo. Sed ac quam lobortis, consequat est non, vulputate risus. Maecenas vehicula velit metus. Maecenas ut urna non metus ultrices egestas ac non dolor.

Proin eu ipsum quis ligula elementum blandit. Donec finibus dolor viverra eleifend efficitur. Duis tempus ligula ut pulvinar rhoncus. Praesent lobortis id felis vel mattis. Donec et commodo erat. Duis facilisis maximus arcu eget interdum. Fusce ut tristique libero, sit amet vulputate sem.

Vestibulum pharetra nibh a metus facilisis, id sodales nisl congue. Fusce id sapien justo. Maecenas sed congue turpis, vel luctus lectus. Vivamus ultrices neque vitae elit rhoncus pulvinar at sit amet lacus. Curabitur accumsan justo sed neque pharetra volutpat. Vivamus placerat lorem at eros hendrerit sollicitudin. Curabitur vitae faucibus est.
[/border][/border][/border][comment]

-------seventh image-------[/comment][border=none; padding: 0px; height: 90px; background: var(--img7); background-size: cover; background-position: 50% 50%; margin-top: 20px;][/border][/border][comment]

--------end of main content------[/comment][/border][comment]


-------tab buttons-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;][comment]
----credit filler------[/comment][border=none; padding: 0px; height: 10px; margin-top: 5px; margin-bottom: 15px; flex-grow: 1; color: transparent; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box; padding-left: 20px;]coded by natasha.[/border][comment]
------buttons begin-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; height: 30px; border-radius: 25px 0px 0px 0px; background: var(--accent); text-transform: uppercase; color: var(--unselected); font-weight: bold; width: 350px; letter-spacing: 1px;][comment]
-------button one-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]about[/border][comment]
-------button two-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]lore[/border][comment]
-------button three-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center;]spots[/border][comment]
-------button four-------[/comment][border=none; padding: 0px; margin: 5px; height: 20px; display: flex; flex-direction: column; justify-content: space-evenly; text-align: center; color: var(--color);]rules[/border][comment]
-------end of tab buttons----[/comment][/border][/border][comment]


------end of tab four-----[/comment][/border][/tab][comment]




--------end of tab container------[/comment][/tabs][/border][/border][/border][comment]

-------end of main container------[/comment][/border][comment]

--------end of code-----[/comment][/border]